<template>
	<view class="wap">
		<u-navbar back-text="" title="提现列表">
		</u-navbar>
		<view class="wrapper-show-money">
			<view class="money-view">
				<h3>提现金额 </h3>
				<view class="money">￥{{walletNum | unitPrice }}</view>

			</view>
		</view>
		<view class="wrapper-tabs">

			<swiper class="swiper-box" :current="swiperCurrent">
				<swiper-item class="swiper-item" v-for="index in list.length" :key="index">
					<scroll-view class="scroll-v view-wrapper" enableBackToTop="true" scroll-with-animation scroll-y @scrolltolower="loadMore">
						<view v-if="datas.length!=0" class="view-item" v-for="(logItem, logIndex) in datas" :key="logIndex" @click="detail(logItem)">
							<view class="view-message">
								<view class="view-item-detail">
									<view class="-title">{{logItem.createTime}}</view>
								</view>
								<view class="view-item-change">
									<view class="-money green">{{logItem.flowPrice}}元</view>
									<!-- <view class="-money green" v-if="logItem.serviceType == 'WALLET_PAY' || logItem.serviceType == 'WALLET_WITHDRAWAL'">
										{{logItem.money | unitPrice}} </view>
									<view class="-money" v-if="logItem.serviceType == 'WALLET_REFUND' || logItem.serviceType == 'WALLET_RECHARGE' || logItem.serviceType == 'WALLET_COMMISSION' ">
										+{{logItem.money | unitPrice}} </view> -->
									<!-- <view class="-time">{{logItem.createTime}}</view> -->
								</view>
							</view>
							<view class="" style="width: 100%;display: flex;justify-content: flex-end;">
								<!-- 订单状态 0：待审核，1：审核通过待放款，2：审核未通过，3：提现成功，
								4：取消，5：提现失败 6:支付处理中 -->
								<view v-if="logItem.orderStatus==0" class="closeWith" @click.stop="closeOrder(logItem)">
									<!-- 待审核 -->
									取消提现
								</view>
								<view v-if="logItem.orderStatus==1" class="closeWith">
									审核通过待放款
								</view>
								<view v-if="logItem.orderStatus==2" class="closeWith">
									审核未通过
								</view>
								<view v-if="logItem.orderStatus==3" class="closeWith">
									提现成功
								</view>
								<view v-if="logItem.orderStatus==4" class="closeWith">
									取消
								</view>
								<view v-if="logItem.orderStatus==5" class="closeWith">
									提现失败
								</view>
								<view v-if="logItem.orderStatus==6" class="closeWith">
									支付处理中
								</view>
							</view>
						</view>

						<!-- <u-empty v-if="datas.length==0" mode="history" text="暂无记录" />
						<u-loadmore v-else bg-color='#f8f8f8' :status="status" /> -->
					</scroll-view>

				</swiper-item>

			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		getUserRecharge,
		getWalletLog,
		cancelOrderAPI
	} from "@/api/members";
	import {
		getUserWallet
	} from "@/api/members";
	import storage from "@/utils/storage.js";
	export default {
		data() {
			return {
				walletNum: 0,
				status: "loadmore",
				current: 0,
				swiperCurrent: 0,
				userInfo: "", //用户详情信息
				params: {
					pageNumber: 1,
					pageSize: 10,
					memberId: storage.getUserInfo().id,
					order: "desc",
				},
				datas: [], //遍历的数据集合
				rechargeList: "", //充值明细列表
				walletLogList: "", //钱包变动列表
				list: [
					// {
					//   name: "充值明细",
					// },
					{
						name: "预存款变动明细",
					},
				],
			};
		},
		watch: {
			swiperCurrent(index) {
				this.swiperCurrent = index;
			},
		},
		async mounted() {
			this.getWallet();
			let result = await getUserWallet(); //预存款

			this.walletNum = result.data.result.memberWallet;
		},
		methods: {

			/**分页获取提现充值记录 */


			getWallet() {
				getWalletLog(this.params).then((res) => {
					console.log(res.data.success)
					if (res.data.success) {
						if (res.data.result.records.length != 0) {
							this.datas.push(...res.data.result.records);
						} else {
							this.status = "nomore";
						}
					}
				});
			},


			changed(index) {
				this.datas = [];
				this.swiperCurrent = index;
				this.params.pageNumber = 1;
				if (index == 0) {
					this.getWallet();
				} else {
					this.getWallet();
				}
			},

			loadMore() {
				this.params.pageNumber++;
				this.getWallet();
			},
			// 取消提现
			closeOrder(data) {
				cancelOrderAPI(data.id).then(res => {
					if (res.data.code == 200) {
						this.$u.toast(res.data.message)
						// this.getWallet();
						this.changed(0)
					} else {
						this.$u.toast(res.data.message)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 提现详情
			detail(data) {
				uni.navigateTo({
					url: "/pages/mine/deposit/withdrawalDetail?id=" + data.id,
				});
			}

		},
	};
</script>

<style lang="scss" scoped>
	.green {
		color: $aider-color-green !important;
	}

	.wrapper-tabs {
		padding: 0 10px;
		box-sizing: border-box;
	}

	.view-item {
		padding: 25rpx 10rpx;

		border-bottom: 1px solid #999999;
	}

	.view-message {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.closeWith {
		min-width: 160rpx;
		margin-top: 20rpx;
		padding: 8rpx 10rpx;
		box-sizing: border-box;
		// border-radius: 25rpx;
		// color: #fff;
		font-size: 30rpx;
		text-align: right;
		// border:1px solid #ff6b35;
	}

	.view-item-change {
		text-align: right;

		>.-money {
			font-size: 36rpx;
			color: $main-color;
			font-weight: bold;
		}

		>.-time {
			font-size: 22rpx;
			color: #999;
		}
	}

	.view-item-detail {
		line-height: 1.75;

		>.-title {
			font-size: 30rpx;
		}

		>.-number {
			font-size: 22rpx;
			color: #999;
		}
	}

	.submit-btn {
		line-height: 90rpx;
		text-align: center;

		color: #fff;
		background: $main-color;

		margin: 0 auto;
		height: 90rpx;
	}

	.operation {
		font-size: 32rpx;
		margin-right: 24rpx;
		color: rgb(96, 98, 102);
	}

	.money {
		font-size: 40rpx;
		font-weight: bold;
	}

	.money-view {
		height: 100%;
		width: 100%;
		padding: 0 32rpx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		flex-direction: column;
		color: #fff;
		background-image: linear-gradient(25deg,
			$main-color,
			$light-color,
			$aider-light-color);
	}

	.swiper-item,
	.scroll-v {
		height: 100%;
	}

	.swiper-box {
		/* #ifndef H5 */
		height: calc(100vh - 200rpx);
		/* #endif */

		/* #ifdef H5 */
		height: calc(100vh - 288rpx);
		/* #endif */
	}

	.wap {
		width: 100%;
		height: calc(100vh - 44px);
	}

	.wrapper-show-money {
		height: 200rpx;
		// background-image: url('/static/img/main-bg.jpg');
	}
</style>
